window.addEventListener(`load`, function () {
    // =========获取元素 start=========
    let tbody = this.document.querySelector(`tbody`)
    // =========获取元素 end=========

    function init() {
        axios({
            url: `/score/list`
        }).then(({ data: { data } }) => {
            // console.log(data);
            let htmlStr = ``
            for (let key in data) {
                htmlStr += `<tr data-id="${key}">
                                <th scope="row">${key}</th>
                                <td>${data[key].name}</td>
                                <td data-batch="1" class="score">${data[key].score[0]}</td>
                                <td data-batch="2" class="score">${data[key].score[1]}</td>
                                <td data-batch="3" class="score">${data[key].score[2]}</td>
                                <td data-batch="4" class="score">${data[key].score[3]}</td>
                                <td data-batch="5" class="score">${data[key].score[4]}</td>
                            </tr>`
            }
            tbody.innerHTML = htmlStr
        })
    }
    init()

    // 学员成绩的录入和修改
    tbody.addEventListener(`click`, function (e) {
        if (e.target.className == `score`) {
            let td = e.target
            // console.log(`score`);
            // 判断是否有input，没有才创建
            if (!td.querySelector(`input`)) {
                let score = td.innerHTML
                td.innerHTML = ``
                // 创建input
                let input = document.createElement(`input`)
                // 将创建的input追加到td中
                td.appendChild(input)
                input.value = score
                // 给input设置样式
                input.style.outline = `none`
                input.style.border = `none`
                input.style.backgroundColor = `transparent`
                input.style.textAlign = `center`
                input.select()
                // 为输入框添加失焦事件，将数据还原
                input.addEventListener(`blur`, function () {
                    td.innerHTML = score
                })
                input.addEventListener(`keydown`, function (e) {
                    if (e.key == `Enter`) {
                        // console.log(`我是Enter键`);
                        // console.log(td.parentNode.dataset.id);
                        console.log(td.dataset.batch);
                        axios({
                            url: `/score/entry`,
                            method: `POST`,
                            data: {
                                "stu_id": td.parentNode.dataset.id,   //学员id
                                "batch": td.dataset.batch,     //第几次成绩
                                "score": input.value    //成绩
                            }
                        }).then(res => {
                            // console.log(res);
                            if (res.data.code == 0) {
                                toastr.success(res.data.message)
                                td.innerHTML = ``
                                td.innerHTML = input.value
                                input.remove()
                            }
                        })
                    }
                })
            }
        }
    })
})